import React, { useState } from 'react';
import { useRequest } from '@/hooks';
import { Button, Col, Empty, message, Row, Table, InputNumber, Form } from 'antd';
import moment from 'moment';
import FormContainer, { FormItem } from './FormContainer';

/**
 * 员工档案 - 工资社保 - 工资信息
 */
const SalarySection = ({ employeeCode, formData, readonly, saveAction, onChange }) => {
    const [isEncrypt, setIsEncrypt] = useState(true);

    // 渲染金钱
    const renderMoney = data => (isEncrypt ? '******' : data || '--');
    const columns = [
        {
            title: '调整时间',
            dataIndex: 'adjustDate',
            width: '25%',
            key: 'adjustDate',
            render: text => (text ? moment(text).format('YYYY-MM-DD') : '')
        },
        {
            title: '调整类型',
            dataIndex: 'adjustType',
            key: 'adjustType',
            width: '25%',
            render: text => ['', '入职', '转正', '晋升', '降级', '调薪', '修正'][text]
        },
        {
            title: '年薪',
            dataIndex: 'totalSalaryAmt',
            key: 'totalSalaryAmt',
            width: '25%',
            render: renderMoney
        },
        {
            title: '月薪',
            dataIndex: 'baseSalaryAmt',
            key: 'baseSalaryAmt',
            width: '25%',
            render: (value, row) => renderMoney(`${value || ''}${row.monthNumber ? ` x ${row.monthNumber}月` : ''}`)
        }
    ];

    // 提交
    const { run: submitRun } = useRequest(submitData => saveAction && saveAction(submitData), {
        manual: true
    });

    // 保存
    const handleSubmit = async values => {
        const idparams = formData.id ? { id: formData.id } : {};
        const submitData = Object.assign(
            {
                employeeCode,
                ...values,
                kpiSalaryAmt: values.kpiSalaryAmt / 3
            },
            idparams
        );
        // 提交
        const res = await submitRun(submitData);
        if (res.code === 10000) {
            message.success(res.msg);
            onChange();
        } else {
            message.error(res.msg);
        }
    };

    // 恶心的处理方式
    const spanStyle = {
        position: 'absolute',
        width: '10px',
        height: '15px',
        background: '#fff',
        left: '-53px',
        top: '13px'
    };

    // render
    return (
        <FormContainer
            title={
                <>
                    工资信息
                    <Button type="link" onClick={() => setIsEncrypt(!isEncrypt)}>
                        {isEncrypt ? '显示工资' : '隐藏工资'}
                    </Button>
                </>
            }
            hasEditAuth={!readonly && !!saveAction}
            onSubmit={handleSubmit}
        >
            {({ getFieldDecorator }) =>
                formData ? (
                    <>
                        <Row gutter={24} style={{ marginBottom: '10px' }}>
                            <Col span={12}>
                                <FormItem
                                    label="当前年薪"
                                    normalComponent={() => (
                                        <div className="multiLineText">{renderMoney(formData.totalSalaryAmt)}</div>
                                    )}
                                    editComponent={() =>
                                        getFieldDecorator('totalSalaryAmt', {
                                            initialValue: formData?.totalSalaryAmt ?? undefined,
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '当前年薪不能为空'
                                                }
                                            ]
                                        })(
                                            <InputNumber
                                                style={{ width: 200 }}
                                                min={0}
                                                precision={2}
                                                max={9999999999.99}
                                                placeholder="请填写当前年薪"
                                            />
                                        )
                                    }
                                />
                            </Col>
                        </Row>
                        <Row gutter={24} style={{ marginBottom: '10px' }}>
                            <Col span={12} type="flex">
                                <FormItem
                                    label="月薪"
                                    required
                                    normalComponent={() => (
                                        <div className="multiLineText">
                                            {renderMoney(
                                                `${formData.baseSalaryAmt || ''}${
                                                    formData.monthNumber ? ` x ${formData.monthNumber}月` : ''
                                                }`
                                            )}
                                            <span style={spanStyle}></span>
                                        </div>
                                    )}
                                    editComponent={() => (
                                        <div>
                                            <Form.Item style={{ display: 'inline-block' }}>
                                                {getFieldDecorator('baseSalaryAmt', {
                                                    initialValue: formData?.baseSalaryAmt ?? undefined,
                                                    rules: [
                                                        {
                                                            required: true,
                                                            message: '月薪不能为空'
                                                        }
                                                    ]
                                                })(
                                                    <InputNumber
                                                        placeholder="请填写月薪"
                                                        style={{ width: 150 }}
                                                        min={0}
                                                        precision={2}
                                                        max={9999999999.99}
                                                    />
                                                )}
                                            </Form.Item>
                                            <span style={{ padding: '0 5px', display: 'inline-block' }}> X </span>
                                            <Form.Item style={{ display: 'inline-block' }}>
                                                {getFieldDecorator('monthNumber', {
                                                    initialValue: formData?.monthNumber ?? undefined,
                                                    rules: [
                                                        {
                                                            required: true,
                                                            message: '月份不能为空'
                                                        }
                                                    ]
                                                })(
                                                    <InputNumber
                                                        placeholder="请填写月份"
                                                        min={0}
                                                        max={99}
                                                        precision={0}
                                                        style={{ width: 100 }}
                                                    />
                                                )}
                                            </Form.Item>
                                            <span style={{ padding: '0 10px', display: 'inline-block' }}> 月 </span>
                                        </div>
                                    )}
                                />
                            </Col>
                            <Col span={12}>
                                <FormItem
                                    label="季度绩效奖金"
                                    normalComponent={() => (
                                        <div className="multiLineText">{renderMoney(3 * formData.kpiSalaryAmt)}</div>
                                    )}
                                    editComponent={() =>
                                        getFieldDecorator('kpiSalaryAmt', {
                                            initialValue: 3 * formData?.kpiSalaryAmt ?? undefined,
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '季度绩效奖金不能为空'
                                                }
                                            ]
                                        })(
                                            <InputNumber
                                                placeholder="请填写季度绩效奖金"
                                                min={0}
                                                precision={2}
                                                max={9999999999.99}
                                                style={{ width: 200 }}
                                            />
                                        )
                                    }
                                />
                            </Col>
                        </Row>
                        <Row gutter={24} style={{ marginBottom: '10px' }}>
                            <Col span={12}>
                                <FormItem
                                    label="半年奖金"
                                    normalComponent={() => (
                                        <div className="multiLineText">{renderMoney(formData.halfYearAmt)}</div>
                                    )}
                                    editComponent={() =>
                                        getFieldDecorator('halfYearAmt', {
                                            initialValue: formData?.halfYearAmt ?? undefined,
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '半年奖金不能为空'
                                                }
                                            ]
                                        })(
                                            <InputNumber
                                                placeholder="请填写半年奖金"
                                                precision={2}
                                                min={0}
                                                max={9999999999.99}
                                                style={{ width: 200 }}
                                            />
                                        )
                                    }
                                />
                            </Col>
                            <Col span={12}>
                                <FormItem
                                    label="年终服务奖金"
                                    normalComponent={() => (
                                        <div className="multiLineText">{renderMoney(formData.endYearAmt)}</div>
                                    )}
                                    editComponent={() =>
                                        getFieldDecorator('endYearAmt', {
                                            initialValue: formData?.endYearAmt ?? undefined,
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '年终服务奖金不能为空'
                                                }
                                            ]
                                        })(
                                            <InputNumber
                                                placeholder="请填写年终服务奖金"
                                                min={0}
                                                precision={2}
                                                max={9999999999.99}
                                                style={{ width: 200 }}
                                            />
                                        )
                                    }
                                />
                            </Col>
                        </Row>
                        <Table
                            rowKey="id"
                            bordered
                            size="small"
                            columns={columns}
                            dataSource={formData.salaryInfoList || []}
                            pagination={false}
                        />
                    </>
                ) : (
                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                )
            }
        </FormContainer>
    );
};

export default SalarySection;
